<template>
  <div id="left-menu">
    <div class="logo-box">
      <img :src="logoImg" :title="companyName">
    </div>
    <el-menu
      :default-active="defaultMenuIndex"
      :unique-opened="true"
      :router="true"
      class="el-menu-vertical-demo"
      text-color="#EEEEEE"
      active-text-color="#ffd04b">
      <el-submenu v-for="(value,key) in nav_arr" :index="key+''" :key="key">
        <template slot="title">
          <div style="position: relative;left: -8px;">
            <i :class="value.icon?value.icon:'el-icon-goods'"></i>
            <span v-text="value.name"></span>
          </div>
        </template>
        <el-menu-item
          v-for="(_value,_key) in value.subMenu"
          :index="key+'_'+_key"
          :key="_key"
          :route="_value.url"
          style="padding-left: 24px;">
          <i :class="_value.icon?_value.icon:'el-icon-menu'"></i>
          <span slot="title" v-text="_value.name"></span>
        </el-menu-item>
      </el-submenu>
      <!--<el-menu-item index="2">-->
      <!--<i class="el-icon-menu"></i>-->
      <!--<span slot="title">导航二</span>-->
      <!--</el-menu-item>-->
      <!--<el-menu-item index="4">-->
      <!--<i class="el-icon-setting"></i>-->
      <!--<span slot="title">导航四</span>-->
      <!--</el-menu-item>-->
    </el-menu>
  </div>
</template>
<script>
import RoleTools from '../Tools/RoleTools'

export default {
  name: 'Nav',
  mounted: function () {
    this.checkDefaultRoute()
    this.GlobalData.MenuArr = this.nav_arr

    let $this=this
    $this.bus.$on('RoleActionChangeCallBus',function () {
      var generateNav = RoleTools.generateNav($this.nav_arr)
      $this.nav_arr=generateNav
      $this.$forceUpdate()
      console.log('generateNav',generateNav)
    })
  },
  watch: {
    $route: function () {
      this.checkDefaultRoute()
      this.$forceUpdate()
    }
  },
  data () {
    return {
      defaultMenuIndex: '',
      nav_arr: window.TinyNavArr
    }
  },
  methods: {
    // 检查当前默认菜单
    checkDefaultRoute: function () {
      var index = ''
      var currRouter = this.$route.path.substring(1)
      this.nav_arr.forEach(function (value, key) {
        value.subMenu.forEach(function (_value, _key) {
          if (_value.url === currRouter) {
            index = key + '_' + _key
          }
        })
      })
      this.defaultMenuIndex = index
      this.$forceUpdate()
    }
  }
}
</script>
<style>

</style>
